<template>
  <div class="main">
    <el-row>
      <el-card>
        <div class="header">关键程度评估统计</div>
        <el-col :xs="24" :sm="12" :md="8" :lg="5">
          <pie1 :pie1data="pie1data"></pie1>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="7">
          <bar1 :bar1data="bar1data"></bar1>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <shanXingTu
            :myChart="shanxingtu3"
            :width="shanwidth"
            :height="height"
            :type="type"
            :color="color1"
            :data1="datayuan3"
            :text="text1"
          ></shanXingTu>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <shanXingTu
            :myChart="shanxingtu4"
            :width="shanwidth"
            :height="height"
            :type="type"
            :color="color1"
            :data1="datayuan4"
            :text="text2"
          ></shanXingTu>
        </el-col>
      </el-card>
    </el-row>
    <el-row>
      <el-card>
        <el-radio-group v-model="radio" @change = "change">
          <el-radio :label="1">初始</el-radio>
          <el-radio :label="2">中期</el-radio>
          <el-radio :label="3">终期</el-radio>
        </el-radio-group>
        <div class="header">成熟度评估统计</div>
        <el-col :xs="24" :sm="12" :md="8" :lg="5">
          <pie2 :pie2data="pie2data"></pie2>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="7">
          <div style="width:600px;height: 300px;">
            <div class="biaoqianqq">
              <div class="one1"><biaoqian3 :bqdata1="bqdata1" :bqdata2="bqdata2" :bqdata3="bqdata3"></biaoqian3></div>
              <div class="one1"><biaoqian4 :bqian1="bqian1" :bqian2="bqian2" :bqian3="bqian3"></biaoqian4></div>
            </div>
            <div class="biaoqianqq">
            <div>
              <shanXingTu
                :myChart="shanxingtu5"
                :width="shanwidth1"
                :height="height1"
                :type="type"
                :color="color1"
                :data1="datayuan7"
                :text="text5"
              ></shanXingTu>
            </div>
            <div>
              <shanXingTu
                :myChart="shanxingtu6"
                :width="shanwidth1"
                :height="height1"
                :type="type"
                :color="color1"
                :data1="datayuan8"
              ></shanXingTu>
            </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="12">
          <div class="zhexiantu"><barandline :barline1="radio" :barline2="barline2" :barline3="barline3" :barline4='barline4' :barline5='barline5'></barandline></div>
        </el-col>  
      </el-card>
    </el-row>
    <el-row>
      <el-card>
        <div class="header">风险评估统计</div>
        <el-col :xs="24" :sm="12" :md="8" :lg="5">
          <bar3 :bar3data="bar3data" :bar3data1="bar3data1"></bar3>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="7">
          <bar4 :bar4data1="bar4data1" :bar4data2="bar4data2" :bar4data3="bar4data3" :bar4data4="bar4data4" ></bar4>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <shanXingTu1
            :myChart="shanxingtu7"
            :width="shanwidth3"
            :height="height3"
            :type="type"
            :color="color1"
            :data1="datayuan5"
            :text="text3"
          ></shanXingTu1>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <shanXingTu1
            :myChart="shanxingtu8"
            :width="shanwidth3"
            :height="height3"
            :type="type"
            :color="color3"
            :data1="datayuan6"
            :text="text4"
          ></shanXingTu1>
        </el-col>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import pie1 from "./com/pie1.vue";
import bar1 from "./com/bar1.vue";
import shan from "./com/shan.vue";
import shanXingTu from "./com/shanxingtu.vue";
import pie2 from "./com/pie2.vue";
import biaoqian3 from "./com/biaoqian3";
import biaoqian4 from "./com/biaoqian4";
import barandline from "./com/barandline.vue"
import bar3 from "./com/bar3"
import bar4 from "./com/bar4.vue"
import shanXingTu1 from "./com/shanxingtu1.vue"

import { bingtu1, zhuzhuangtu1, bingtu2, bingtu3, maturingbingtu1, maturingbingtu2, riskbingtu1, riskzhuzhuangtu1, riskpbingtu2, riskpbingtu3 } from "@/api/echar"
export default {
  data() {
    return {
      radio: 1,
      shanxingtu3: "shanxingtu3",
      shanxingtu4: "shanxingtu4",
      shanxingtu5: "shanxingtu5",
      shanxingtu6: "shanxingtu6",
      shanxingtu7: "shanxingtu7",
      shanxingtu8: "shanxingtu8",
      shanwidth: "320px",
      height: "250px",
      shanwidth1: "300px",
      height1: "240px",
      shanwidth2: "350px",
      height2: "250px",
      shanwidth3: '430px',
      height3: '330px',
      type: "circle",
      // color1: ["#2D4D82", "#3068C3", "#49ACDC", "#87E9FA"],
      color1: ["#49ACDC", "#3068C3", "#2D4D82", "#87E9FA"],
      color2: ["#3068C3", "#49ACDC"],
      color3: ['#2d4c82', '#3863a8', '#477bcf', '#3e99c5', '#4aacdd', '#6ec5f0', '#5bdce2', '#9aedf9', '#a9ebf9', '#aaf9e6'],
      datayuan3: [],
      datayuan4: [
        // {
        //   name: "北京",
        //   value: 5600,
        // },
        // {
        //   name: "上海",
        //   value: 3600,
        // },
      ],
      pie1data: [],
      bar1data: [],
      text1: '重要性',
      text2: '困难性',
      text3: '各领域数量占比',
      text4: '各要素数量占比',
      text5: 'TRL2',
      bar3data: [],
      bar3data1: [],
      pie2data: [],
      bar4data1: [],
      bar4data2: [],
      bar4data3: [],
      bar4data4: [],
      datayuan5: [],
      datayuan6: [],
      datayuan7: [],
      datayuan8: [],
      barline2: [],
      barline3: [],
      barline4: [],
      barline5: [],
      bqdata1: '',
      bqdata2: null,
      bqdata3: null,
      bqian1: '',
      bqian2: null,
      bqian3: null
    }
  },
  components: {
    pie1,
    bar1,
    shan,
    shanXingTu,
    pie2,
    biaoqian3,
    biaoqian4,
    barandline,
    bar3,
    bar4,
    shanXingTu1
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 关键程度评估统计 第一个图
      bingtu1().then(res => {
        console.log(res, "*****(((");
        this.pie1data = res.data
      }).catch(err => {
        console.log(err);
      })
      // 第二个图
      zhuzhuangtu1().then( res => {
        this.bar1data = res
        console.log(res, '*****0');
       
      }).catch(err => {
        console.log(err);
      })
      // 第三个图
      bingtu2().then( res => {
        this.datayuan3 = res.data
        console.log(this.datayuan3)
        console.log(res, '0000');
      }).catch(err => {
        console.log(err);
      })
      // 第四个图
      bingtu3().then( res => {
        this.datayuan4 = res.data
        // console.log(res.data, '0000');
      }).catch(err => {
        console.log(err);
      })

      // 成熟度评估统计
      maturingbingtu1(this.radio).then( res => {
        console.log(res, '9999');
        this.pie2data = res.data
      }).catch(err => {
        console.log(err);
      })
      maturingbingtu2(this.radio).then(res => {
        console.log(res, '()(()((((');
        console.log(this.radio, '标识');
        this.bqdata2 = res.trl1
        this.bqdata3 = res.trl1Ratio
        this.bqian2 = res.trl2
        this.bqian3 = res.trl2Ratio
        this.datayuan7 = res.data_1
        this.datayuan8 = res.data_2
        this.barline2 = res.count_1
        this.barline3 = res.count_2
        this.barline4 = res.lyName
        this.barline5 = res.csdzs
        if (this.radio === 1) {
          this.bqdata1 = '初始技术成熟度等级为TRL2'
          this.bqian1 = '初始技术成熟度等级为TRL3'
        } else if (this.radio === 2) {
          this.bqdata1 = '中期技术成熟度等级为TRL4'
          this.bqian1 = '中期技术成熟度等级为TRL5'
        }
      }).catch(err => {
        console.log(err);
      })

      // 风险评估统计
      riskbingtu1().then( res => {
        // this.datayuan4 = res.data
        // console.log(res.data, '0000');
        this.bar3data = res.inner
        this.bar3data1 = res.outer
      }).catch(err => {
        console.log(err);
      })
      // 第二个图
      riskzhuzhuangtu1().then(res => {
        // console.log(res, '***');
        this.bar4data1 = res.lyName
        this.bar4data2 = res.低风险
        this.bar4data3 = res.中风险
        this.bar4data4 = res.高风险

      }).catch(err => {
        console.log(err);
      })
      // 第三个图
      riskpbingtu2().then(res => {
        // console.log(res, '***');
        this.datayuan5 = res.data
      }).catch(err => {
        console.log(err);
      })
      // 第四个图
      riskpbingtu3().then(res => {
        console.log(res, '---6---')
        this.datayuan6 = res.data
      }).catcch(err => {
        console.log(err)
      })
    },
    change(value) {
      console.log(this.radio);
      maturingbingtu1(this.radio).then( res => {
        console.log(res, '9999888');
        this.pie2data = res.data
      }).catch(err => {
        console.log(err);
      })
      maturingbingtu2(this.radio).then(res => {
        this.datayuan7 = res.data_1
        this.datayuan8 = res.data_2
      }).catch(err => {
        console.log(err);
      })
      maturingbingtu2(this.radio).then(res => {
        console.log(res, '()(()((((');
        this.bqdata2 = res.trl1
        this.bqdata3 = res.trl1Ratio
        this.bqian2 = res.trl2
        this.bqian3 = res.trl2Ratio
        this.datayuan7 = res.data_1
        this.datayuan8 = res.data_2
        this.barline2 = res.count_1
        this.barline3 = res.count_2
        this.barline4 = res.lyName
        this.barline5 = res.csdzs
        if (this.radio === 1) {
          this.bqdata1 = '初始技术成熟度等级为TRL2'
          this.bqian1 = '初始技术成熟度等级为TRL3'
        } else if (this.radio === 2) {
          this.bqdata1 = '中期技术成熟度等级为TRL4'
          this.bqian1 = '中期技术成熟度等级为TRL5'
        }
      }).catch(err => {
        console.log(err);
      })
    }
  },
}
</script>

<style lang="less" scoped>
.header {
  font-size: 16px;
  text-align: center;
  margin: 10px auto;
}
.biaoqianqq {
  display: flex;
  width: 600px;
}
.one1 {
  margin-left: 31px;
  width: 250px;
}
.zhexiantu {
  position: absolute;
  top: 16%;
  right: 3%;
}
</style>
